<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lucene数据查看</title>
</head>
<style>
    [v-cloak]{
        color: red;
    }
    .el-row {
        margin-bottom: 20px;
    &:last-child {
         margin-bottom: 0;
     }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }
</style>
<body>
<div id="app">




    <el-row>
        <el-col :span="24">

                <el-form  class="demo-form-inline">
                    <el-col v-for="(o,index) in luceneIndex" >
                        <el-form-item :label="o" >
                            <el-input v-model="searchParams.searchCoditions[index]['vvalue']"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-button v-on:click="searchCodition" type="primary" icon="el-icon-search">搜索</el-button>
                </el-form>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <el-table style="width: 100%;"
                      :data="pageSearchResult.items"
            >
                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column  v-for=" lukey in luceneIndex"  :label="lukey" :key="lukey" :prop="lukey" width="180">
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="searchParams.currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="searchParams.pageSize"
                    :current-page.sync="searchParams.currentPage"
                    :page-size.sync="searchParams.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageSearchResult.totalRecord">    //这是显示总共有多少数据，
            </el-pagination>
        </el-col>
    </el-row>
</div>

</body>
<!-- import Vue before Element  @=v-on :=v-bind -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>



    var vues=new Vue({
        el:"#app",
        data:{
            pageSearchResult:{
                currentPage:0,
                pageSize:10,
                totalRecord:0,
                totalPage:0,
                items:[
                ]
            },
            searchParams:{
                currentPage:0,
                pageSize:10,
                searchCoditions:[]
            },
            luceneIndex:[],
            dialogVisible:true
        },

        methods:{

            searchCodition(){
                axios({
                    url:'http://localhost:9999/pageSearch',
                    method:"post",
                    data:vues.searchParams,
                    header:{
                        'Content-Type':'application/json'  //如果写成contentType会报错
                    }
                })
                    .then(res=>{
                        vues.pageSearchResult=res.data;
                    })
                    .catch(Error=>{
                        console.log(Error)
                    });

            },
            getAllIndex() {

                axios.get('http://localhost:9999/getAllIndex',{       // 还可以直接把参数拼接在url后边

                }).then(function(res){
                    vues.luceneIndex=res.data ;
                    res.data.forEach(item=>{
                        let newobj={
                            vkey:item

                        };
                        vues.searchParams.searchCoditions.push(newobj);
                    });
                }).catch(function (error) {
                    console.log(error);
                });
            },
            handleSizeChange(){

                vues.searchCodition();
            },
            handleCurrentChange(){
                vues.searchCodition();
            }

        },
        created() {
            this.getAllIndex();
        }
    });

</script>
</html>